<template>
	<div>
		<div class="box">
			<uni-forms
				ref="form"
				:model="currentInfoData"
				validate-trigger="bind"
				label-width="0">
				<uni-table border stripe emptyText="暂无更多数据" class="table">
					<uni-tr>
						<uni-th align="center" width="70px">操作</uni-th>
						<uni-th align="center">装饰项</uni-th>
						<uni-th align="center" width="100px">数量</uni-th>
						<uni-th align="center" width="100px">单价</uni-th>
						<uni-th align="center" width="100px">说明</uni-th>
					</uni-tr>
					<uni-tr
						v-for="(
							item, index
						) in currentInfoData.attachedDecorationList">
						<uni-td align="center" class="td">
							<div
								v-if="item.operationType == '2'"
								@click="change_selectedType(item)"
								class="handler">
								<uni-icons
									v-if="item.selectedType == '1'"
									type="checkmarkempty"></uni-icons>
								<uni-icons
									v-else
									type="closeempty"
									class="handler-xicon"></uni-icons>
							</div>
							<div v-else>
								<div
									@click="
										remove_attachedDecorationList(
											item,
											index,
										)
									">
									删除
								</div>
							</div>
						</uni-td>
						<uni-td align="center" class="td">
							<FromItem
								:showRequiredIcon="false"
								:required="true"
								:state="state"
								errorLabel="装饰项"
								:name="[
									'attachedDecorationList',
									index,
									'decorationVal',
								]">
								<ASelectUni
									:dict="{
										list: refittedList,
										label: 'decorationName',
										value: 'decorationName',
									}"
									:disabled="state == 'disabled'"
									v-model="item.decorationVal"
									:state="state"
									@change="
										change_pdecorationVal(item, arguments)
									"></ASelectUni>
							</FromItem>
						</uni-td>
						<uni-td align="center" class="td">
							<FromItem
								:showRequiredIcon="false"
								:required="true"
								:state="state"
								errorLabel="装饰项数量"
								:name="[
									'attachedDecorationList',
									index,
									'decorationCount',
								]">
								<AInput
									:state="state"
									v-model="item.decorationCount"
									type="number"></AInput>
							</FromItem>
						</uni-td>
						<uni-td align="center" class="td">
							<FromItem
								:showRequiredIcon="false"
								:required="true"
								:state="state"
								errorLabel="装饰项单价"
								:name="[
									'attachedDecorationList',
									index,
									'decorationPrice',
								]">
								<AInput
									:state="state"
									v-model="item.decorationPrice"
									type="number"
									placeholder="请输入金额"></AInput>
							</FromItem>
						</uni-td>
						<uni-td align="center" class="td">
							<AInput
								v-model="item.remark"
								:state="state"></AInput>
						</uni-td>
					</uni-tr>
				</uni-table>
			</uni-forms>
			<button
				type="primary"
				v-if="state === 'write'"
				@click="push_attachedDecorationList">
				增加
			</button>
		</div>
	</div>
</template>

<script>
	import * as app from '@/api/index.js';
	import * as apis from '@/api/quota/apply/api.js';
	import FromItem from '../formItem/index.vue';
	export default {
		name: '',
		components: { FromItem },
		dicts: [],
		props: {},
		inject: [
			'details_provide',
			'config_provide',
			'deptList_provide',
			'state_provide',
			'index_provide',
			'planDicts_provide',
			'fromtype_provide',
			'itemDictList_provide',
		],
		data() {
			return {
				refittedList: [],
			};
		},
		computed: {
			details() {
				return this.details_provide();
			},
			config() {
				return this.config_provide();
			},
			deptList() {
				return this.deptList_provide();
			},
			planDicts() {
				return this.planDicts_provide();
			},
			state() {
				return this.state_provide();
			},
			fromtype() {
				return this.fromtype_provide();
			},

			index() {
				return this.index_provide();
			},
			currentInfoData() {
				return this.details.productList?.[this.index] ?? {};
			},
			firstInfoData() {
				return this.details.productList?.[0] ?? {};
			},
			itemDictList() {
				return this.itemDictList_provide();
			},
		},
		watch: {},
		filters: {},
		created() {},
		mounted() {},
		methods: {
			getRefittedList() {
				if (!this.currentInfoData?.plan?.carSeating) {
					this.refittedList = [];
					this.$set(
						this.currentInfoData,
						'attachedDecorationList',
						[],
					);
					return;
				}
				let params = {
					seat: this.currentInfoData.plan?.carSeating,
				};
				apis.Decoration(params).then(res => {
					if (res.code == 200) {
						this.refittedList = res.data;
						this.refittedList.push({
							decorationName: '其他',
							decorationFee: undefined,
						});
						// this.initDetaultRefittedList();
					}
				});
			},
			dataload() {
				this.getRefittedList();
				this.setDisabled();
			},
			push_attachedDecorationList() {
				if (
					Array.isArray(
						this?.currentInfoData?.attachedDecorationList,
					) == false
				) {
					this.$set(
						this.currentInfoData,
						'attachedDecorationList',
						[],
					);
				}
				this.currentInfoData.attachedDecorationList.push({
					selectedType: '1', // 是否选中
					operationType: '1', // 1、自定义，2、套餐
					decorationCount: undefined, // 数量
					decorationPrice: undefined, // 单项费
					decorationVal: undefined,
				});
			},
			change_pdecorationVal(row, [{ val, item }]) {
				this.$set(row, 'decorationPrice', item.decorationFee);
				this.setDisabled();
			},
			change_selectedType(row) {
				row.selectedType == '2'
					? (row.selectedType = '1')
					: (row.selectedType = '2');
				if (row.selectedType == '2') {
					this.$set(
						this.currentInfoData.attachedDecorationList[index],
						'decorationCount',
						0,
					);
				} else {
					this.$set(
						this.currentInfoData.attachedDecorationList[index],
						'decorationCount',
						1,
					);
				}
			},
			remove_attachedDecorationList(item, index) {
				uni.showModal({
					content: `是否删除${
						item.decorationVal ? item.decorationVal : '该'
					}加装项？`,
					success: res => {
						if (res.confirm) {
							this.currentInfoData.attachedDecorationList.splice(
								index,
								1,
							);
						}
					},
				});
			},
			setDisabled(row) {
				this.itemDictList.refittedList?.map((item, i) => {
					this.$set(item, 'disabled', false);
					let child =
						this.currentInfoData?.attachedDecorationList?.find(
							e => {
								return e.decorationVal == item.decorationName;
							},
						);
					if (child && item.decorationName !== '其他') {
						this.$set(item, 'disabled', true);
					}
				});
			},
		},
		beforeDestroy() {
			if (this.notEmpty(this.details?.productList?.[this.index])) {
				this.currentInfoData.attachedDecorationList = [];
			}
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		// margin: 20rpx;
		// padding: 20rpx;
		padding-top: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
		.title {
			border-bottom: 1px solid #e9e9e9;
			font-weight: 500;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
		}
	}
</style>
